@import '../comm.scss';

.solution-box {
  .banner {
    width: 100%;
    height: pxTorem(500);
    position: relative;
    .banner-info {
      position: absolute;
      left: pxTorem(977);
      top: pxTorem(112);
      z-index: 9;
      h3 {
        font-size: pxToRem(48);
        color: #fff;
        font-weight: 500;
      }
      p {
        color: #fff;
      }
      .sub-title {
        line-height: pxTorem(42);
        font-size: pxTorem(16);
        font-weight: 400;
      }
      .content {
        font-size: pxTorem(30);
        font-weight: 400;
        line-height: pxTorem(56);
      }
      .btn-box {
        margin-top: pxTorem(47);
        .btn {
          font-size: pxTorem(24);
          width: pxTorem(146);
          height: pxTorem(50);
          font-weight: 500;
        }
      }
    }
  }

  .part1-container {
    margin-top: pxTorem(87);
    height: pxTorem(863);
    width: 100%;
    .part1 {
      width: pxTorem(1005);
      height: pxTorem(863);
      margin-left: pxTorem(87);
      position: relative;
      float: left;
    }
    .part2 {
      float: right;
      margin-top: pxTorem(182);
      width: pxTorem(711);
      height: pxTorem(359);
      background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/screen/part2.png')
        no-repeat left top;
      background-size: 100%;
    }
  }

  .good-box,
  .solution-box,
  .demo-box {
    h3 {
      color: #000;
      font-weight: 600;
      font-size: pxTorem(30);
      text-align: center;
    }
    .sub-title {
      margin-top: pxTorem(16);
      font-size: pxTorem(14);
      font-weight: 400;
      color: #999;
      text-align: center;
    }
  }

  // 我们的优势
  .good-box {
    margin-top: pxTorem(185);
    .sub-title {
      margin-bottom: pxTorem(60);
    }
    .good-content {
      width: pxTorem(1163);
      margin: 0 auto;
      position: relative;
      .left-menu {
        float: left;
        ul {
          margin: 0;
          padding: 0;
          li {
            margin-bottom: pxTorem(20);
            a {
              text-decoration: none;
              display: inline-block;
              padding: 0 pxTorem(20) pxTorem(20);
              // width: pxTorem(120);
              height: pxTorem(40);
              line-height: pxTorem(40);
              text-align: center;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 10px 18px 0px rgba(23, 64, 197, 0.1);
              border-radius: pxTorem(4);
            }
          }
          li.active a,
          li:hover a {
            background: $primary;
            color: #fff;
          }
          li.active {
            position: relative;
            &::before {
              content: '';
              position: absolute;
              z-index: 9;
              width: pxTorem(20);
              height: pxTorem(9);
              left: pxTorem(-37);
              top: pxTorem(15);
              background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/comm/ul-l.png)
                no-repeat left top;
              background-size: 100% 100%;
            }
            &::after {
              content: '';
              position: absolute;
              z-index: 9;
              width: pxTorem(23);
              height: pxTorem(34);
              left: pxTorem(66+120-23);
              top: pxTorem(9);
              background: url(http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/comm/ul-r.png)
                no-repeat left top;
              background-size: 100% 100%;
            }
          }
        }
      }
      .right-info {
        float: right;
        width: pxTorem(977);
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 10px 54px 0px rgba(23, 64, 197, 0.13);
        border-radius: pxTorem(10);
        padding: pxTorem(57) 0 pxTorem(42) pxTorem(95);
        box-sizing: border-box;
        z-index: 11;
        position: relative;
        p {
          font-size: pxTorem(18);
          color: #737988;
          line-height: pxTorem(27);
          font-weight: 400;
        }
        img {
          margin-top: pxTorem(71);
          width: pxTorem(789);
          height: pxTorem(431);
          display: inline-block;
          border-radius: 4px;
        }
        .btn-box {
          margin-top: pxTorem(47);
          text-align: center;
        }
      }
    }
  }

  // 解决方案
  .solution-box {
    margin-top: pxTorem(141);
    .solution-card {
      margin-top: pxTorem(95);
      text-align: center;
      .card {
        vertical-align: top;
        display: inline-block;
        width: pxTorem(491);
        height: pxTorem(779);
        padding-top: pxTorem(368);
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/screen/card.jpg')
          no-repeat left top;
        background-size: 100%;
        box-shadow: 0px 10px 54px 0px rgba(23, 64, 197, 0.13);
        border-radius: pxTorem(10);
        position: relative;

        dl {
          text-align: center;
          color: #000;
          dt {
            line-height: pxTorem(64);
            padding-top: pxTorem(22);
            font-size: pxTorem(24);
            font-weight: 600;
          }
          dd {
            margin-top: pxTorem(20);
            line-height: pxTorem(20);
            font-size: pxTorem(18);
            span {
              font-size: pxTorem(18);
              font-weight: 600;
              color: #000;
            }
            i.right {
              display: inline-block;
              width: pxTorem(15);
              height: pxTorem(11);
              background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/screen/right.png')
                no-repeat left top;
              background-size: 100%;
              margin-right: pxTorem(8);
            }
          }
        }

        .btn {
          margin: 0;
          padding: 0;
          position: absolute;
          left: pxTorem(165);
          bottom: pxTorem(45);
          z-index: 9;
          width: pxTorem(161);
          height: pxTorem(54);
          line-height: pxTorem(54);
          border-radius: pxTorem(4);
          color: #fff;
        }
        .contact-btn {
          background: #ff6461;
        }
        .custom-btn {
          background: $primary;
        }
      }
      .card.custom {
        margin-left: pxTorem(121);
        background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/screen/card-custom.jpg')
          no-repeat left top;
        background-size: 100%;
      }
    }
  }

  // 案例
  .demo-box {
    margin-top: pxTorem(124);
    width: 100%;
    background: #1a2a58;
    .demo-bg {
      width: 100%;
      height: 100%;
      // background: url('http://candy-web-48291.oss-cn-hangzhou.aliyuncs.com/qbmf-website/images/comm/demo-bg.png') no-repeat left center #1a2a58;
      // background-size: 100%;
      h3,
      .sub-title {
        color: #fff;
      }
      h3 {
        padding-top: pxTorem(99);
      }
      .sub-title {
        margin-bottom: pxTorem(58);
      }
      .demo-info {
        width: pxTorem(1204);
        margin: 0 auto;
        height: pxTorem(161);
        padding: pxTorem(37) pxTorem(73);
        box-sizing: border-box;
        background: rgba(60, 81, 135, 1);
        box-shadow: 0px 10px 54px 0px rgba(23, 64, 197, 0.05);
        border-radius: pxTorem(10);
        font-size: pxTorem(18);
        font-weight: 400;
        color: #fff;
        line-height: pxTorem(27);
      }
      .demo-img {
        padding-top: pxTorem(133);
        text-align: center;
        padding-bottom: pxTorem(199);
        .img {
          display: inline-block;
          width: pxTorem(598);
          height: pxTorem(330);
        }
        .img.two {
          margin-left: pxTorem(31);
        }
      }
    }
  }

  // 数据footer
  .foot-box {
    margin-top: pxTorem(95);
    text-align: center;
    h3 {
      color: #000;
      font-weight: 600;
      font-size: pxTorem(30);
      text-align: center;
    }
    .btn {
      margin-top: pxTorem(68);
      font-size: pxTorem(18);
      font-weight: 500;
      width: pxTorem(120);
      height: pxTorem(40);
      display: inline-block;
    }
  }
}
